前言

今天要來介紹 React.js 中一項蠻重要的觀念，在 React 的世界非常強調模組化，當每個小螺絲都做好自己的角色後，組合起來的產品也就穩定很多了，如果大家對於模組化比較不了解歡迎看筆者之前寫過的文章先讓自己有個基本概念。

JS模組化！(匯入匯出篇)

class

在開始正式進入文章之前，筆者要先跟大家聊聊 class 這個語法糖， class 這個關鍵字是在 ES6 時期才出現的，雖然 JS 美其名叫 class 但 JS 的 class 跟普通程式語言的 class 可是有著天大的差別，在講差別之前先來講一下 class 的基本寫法。

class App {
  constructor(name) {
    // init some class variable
    this.name = name
  }
}

// 繼承寫法
class App2 extends App {
  // do something
}

其實 JS 的 class 寫法就跟其他程式語言的 class 很像，一樣有 constructor(建構子) 的概念，甚至要寫 class 的繼承也只要用 extends 這個關鍵字就可以了，但是 JS 的 class 其實只是個語法糖，為什麼會這麼說呢？大家可以看底下這張圖，下圖是經由 Babel 轉譯過後的 class 。

筆者在這邊分別用紅框以及藍框來表達兩個不同的實作區塊，可以看到轉譯後的結果跟 class 真的一點關係都沒有XD

component

有了 class 的觀念後，接下來就要開始實作 component 啦！其實 React 實作 component 的方式有非常多種，這邊筆者先用最簡單的方式來實作 React Component 。

import React from 'react'

class App extends React.Component {
  // implement class action
}

// 或者你也可以懶惰一點，使用 ES6 的解構賦值
import React, { Component } from 'react'

class App extends Component {
  // implement class action
}

眼尖的讀者們不曉得有沒有發現一件事情，筆者在命名 className 的時候都是大寫開頭，其實要成為 React Component 最重要的一件事就是第一個字母一定要大寫，這點非常的重要，如果不用大寫的話就沒辦法成為 React Component 了，後面至所以要繼承 React 自己原生的 Component 會在底下加以闡述。

container

在上面提到了 component ，相信讀者們都有個問題，就是要如何組合這些 component 使這些元件可以被正確的放到想要的位子上，這時候就需要 container 了，其實在 React 的官方文件並沒有特別強調 container 的存在，而是用 Composing Components 來表達 component 的組合，工程師們為了要讓整體架構變的明確一點，於是將組合各種 component 這個大型的 component 命名為 container 。

import Component1 from './component1'
import Component2 from './component2'

class App extends React.Component {
  render() {
    return (
      <div>
        <Component1 />
        <Component2 />
      </div>
    )
  }
}

life cycle

每個 React Component 都有自己的 生命週期(life cycle) ，這些 life cycle 都是要繼承 React.Component 這個 component 才能使用，這些 life cycle 其實都是 function ，所以只要在自己寫好的元件寫入這幾個 function 即可，這裡筆者挑幾個最常用的來解釋一下 component life cycle 。

一般來說 component life cycle 可分為三個階段：

1. mounting

   當元件第一次繪製的時候，會進入 mounting 的過程，常用到的 mounting function 有：

   • render()

     render() 內部會回傳 JSX 來完成 component UI 繪製。

   • componentDidMount()

     當 render() 執行完畢後會觸發 componentDidMount() 。

2. updating

   當元件要進行畫面更新的時候，會進入 updating 的過程，底下可以看到每個 updating function 都會帶入 state 以及 props ，至於 state 以及 props 是什麼東西這裡筆者稍微賣個關子，會在明天的文章加以闡述，常用到的 Updating function 有：

   • shouldComponentUpdate(nextProps, nextState)

     藉由比較 props 以及 state 來決定是否需要更新

   • componentDidUpdate(prevProps, prevState, snapshot)

     當元素完成更新後，會觸發 componentDidUpdate() ，這邊可以看到多了一個 snapshot 的參數，這個是用來進行元件測試時會用到的參數，讀者稍微有個概念即可，一般在撰寫時通常會用到的參數只有頭兩個而已。

3. unmounting

   當元件要被移除時後，會進入 unmounting 的過程，常用到的 unmounting function 有：

   • componentWillUnmount()

     當元件要被移除時會觸發 componentWillUnmount() ，通常會在裡面移除 event listener 、 clearInterval 等等動作。

總結

今天介紹了 React 中的 component 這個非常重要的觀念以及應用，其實 component 能講的東西非常多，很難用一篇文章就闡述完，假如讀者是第一次接觸到 component 這個概念，一定要把這篇文章的基本觀念先吸收完畢，這樣在未來的文章中講一些比較進階的 component 才會比較快上手喔！

如果有什麼問題歡迎在下方留言給我，沒問題的話明天就要開始講 React 是如何更新 component 。